<template>
    <div id="baseInfo-container" class="container">
        
        <div ref="loading" class="loading">
            <img src="../../assets/informationEntry/loading.png">
            <img src="../../assets/informationEntry/loading_1.png">
        </div>
        <div class="content">
        
            <div :id="'module_' + mIndex" class="module" v-for="(moduleObj,mIndex) in allFieldList" :key="mIndex">
                <!-- <div class="minTile"> -->
                    <!-- <div class="title-text"><span class="line"></span>{{moduleObj.moduleName}}</div> -->
                    <!-- <el-button type="primary" size="mini" round @click="dialogVisible_2=true;currentGroup=null">导入</el-button> -->
                    <!-- <el-button type="primary" size="mini" round @click="exportModel(mIndex+1,moduleObj.moduleName)">批量导出</el-button> -->
                <!-- </div> -->
                <div class="minTile_1">
                    <div class="title-text">{{moduleObj.moduleName}}</div>
                    <el-button type="primary" size="mini" round @click="exportData('',moduleObj.moduleName,moduleObj.moduleName)">批量导出</el-button>
                </div>
                
                <div class="group" v-for="(groupObj,gIndex) in moduleObj.groupList" :key="gIndex" :id="groupObj.id">
                    <!-- {{unsavedParamIdList}} -->
                    <div class="groupTitle">
                        <div class="title-text">
                            * {{groupObj.name}}
                        </div>
                       <el-button type="primary" size="mini" round plain @click="dialogVisible_2=true;currentGroup=groupObj">导入</el-button>
                        <el-button type="primary" size="mini" round plain @click="exportData(groupObj.id,'',groupObj.name)" style="margin-left: 10px;">导出</el-button>
                    </div>
                    <div class="formContainer" v-for="(sectionObj,sectionIndex) in groupObj.section" :key="sectionIndex">
                        <!-- {{paramObj.groupId + '_' + paramObj.id + '_' + paramObj.userSelection.orders}} -->
                        <div v-show="paramObj.isShow" class="formItem" :class="[{unsaved:unsavedParamIdList.indexOf(findParamKey(paramObj)) != -1},paramObj.class]" v-bind:style="{width:paramObj.width}" v-for="(paramObj,paramIndex) in sectionObj" :key="paramIndex">
                            <!-- {{paramObj}} -->
                            <div class="name"><i v-show="paramObj.type == 'file' || paramObj.type == 'img'" class="iconfont iconfujian"></i>{{paramObj.name}}：</div>

                            <div class="value">
                                <el-input :ref="findParamKey(paramObj)" v-if="paramObj.type == 'text'" :disabled="paramObj.isDisable" :type="paramObj.typeValidate=='integer'?'number':'text'" min=0 max=100000 @input="paramValueChange($event,paramObj)" class="value" size="mini" v-model="paramObj.userSelection.parameterValue" :placeholder="paramObj.placeholder"></el-input>

                                <el-input :ref="findParamKey(paramObj)" v-else-if="paramObj.type == 'textarea'" type="textarea" :rows="3" @input="paramValueChange($event,paramObj)" class="value" size="mini" v-model="paramObj.userSelection.parameterValue" placeholder="请输入内容"></el-input>

                                <textSelect :ref="findParamKey(paramObj)" class="value" v-else-if="paramObj.type == 'select&text'" :options='paramObj.options' v-model="paramObj.userSelection.parameterValue" @input="paramValueChange($event,paramObj)" ></textSelect>

                                <!-- 附件 -->
                                <div :ref="findParamKey(paramObj)" class="value file"  v-else-if="paramObj.type == 'file'" :style="paramObj.userSelection.parameterValue=='正在上传...'?'pointer-events:none;':''">
                                    <el-input type="text" class="value" size="mini" placeholder=""></el-input>
                                    <div class="fileContent" :class="{has:paramObj.userSelection.parameterValue.length > 0}" >
                                        <label class="name">
                                            <div v-text="paramObj.userSelection.parameterValue.length>0?(paramObj.userSelection.parameterValue.split('/')[paramObj.userSelection.parameterValue.split('/').length-1]):'选择文件'">选择文件</div>
                                            <input type="file" @change="paramValueChange($event,paramObj)" placeholder="请输入内容">
                                        </label>
                                        <div class="close" @click="deleteAttachment(paramObj)"><i class="el-icon-circle-close"></i></div>
                                    </div>
                                </div>

                                <!-- 照片 -->
                                <div :ref="findParamKey(paramObj)" class="value file"  v-else-if="paramObj.type == 'img'" :style="paramObj.userSelection.parameterValue=='正在上传...'?'pointer-events:none;':''">
                                    <el-input type="text" class="value" size="mini" placeholder=""></el-input>
                                    <div class="fileContent" :class="{has:paramObj.userSelection.parameterValue.length > 0}" >
                                        <label class="name">
                                            <div v-text="paramObj.userSelection.parameterValue.length>0?(paramObj.userSelection.parameterValue.split('/')[paramObj.userSelection.parameterValue.split('/').length-1]):'选择文件'">选择照片</div>
                                            <input type="file" @change="paramValueChange($event,paramObj)" placeholder="请输入内容">
                                        </label>
                                        <div class="close" @click="deleteAttachment(paramObj)"><i class="el-icon-circle-close"></i></div>
                                    </div>
                                </div>

                                <el-select  :ref="findParamKey(paramObj)" @change="paramValueChange($event,paramObj)" v-else-if="paramObj.type == 'select'" class="value" size="mini" :disabled="paramObj.isDisable"  v-model="paramObj.userSelection.parameterValue" placeholder="请选择">
                                    <el-option v-for="oItem in paramObj.options" :key="oItem.id" :label="oItem.name" :value="oItem.name"></el-option>
                                </el-select>

                                <el-date-picker :ref="findParamKey(paramObj)" v-else-if="paramObj.type == 'date_year'" format="yyyy" value-format='yyyy' type="year" class="value"  size="mini"  @change="paramValueChange($event,paramObj)" v-model="paramObj.userSelection.parameterValue" placeholder="选择日期"></el-date-picker>
                                <el-date-picker :ref="findParamKey(paramObj)" v-else-if="paramObj.type == 'date_month'" format="yyyy.MM" value-format='yyyy.MM' type="month" class="value"  size="mini" @change="paramValueChange($event,paramObj)" v-model="paramObj.userSelection.parameterValue" placeholder="选择日期"></el-date-picker>
                                <el-date-picker :ref="findParamKey(paramObj)" v-else-if="paramObj.type == 'date_day'" format="yyyy.MM.dd" value-format='yyyy.MM.dd' type="date" class="value"  size="mini" @change="paramValueChange($event,paramObj)" v-model="paramObj.userSelection.parameterValue" placeholder="选择日期"></el-date-picker>
                                
                                <div :ref="findParamKey(paramObj)" v-else-if="paramObj.type == 'date_month_range'" class="value daterange">
                                    <el-date-picker type="month" size="mini" prefix-icon="" format="yyyy.MM" value-format='yyyy.MM' v-model="paramObj.userSelection.startDate" @change="paramValueChange($event,paramObj,'date_range_start')"  placeholder="开始日期"></el-date-picker>
                                    <span class="line"></span>
                                    <el-date-picker type="month" size="mini" format="yyyy.MM" value-format='yyyy.MM' v-model="paramObj.userSelection.endDate" @change="paramValueChange($event,paramObj,'date_range_end')"  placeholder="至今"></el-date-picker>
                                </div>
                                <div :ref="findParamKey(paramObj)" v-else-if="paramObj.type == 'date_day_range'" class="value daterange">
                                    <el-date-picker type="date" size="mini" prefix-icon="" format="yyyy.MM.dd" value-format='yyyy.MM.dd' v-model="paramObj.userSelection.startDate" @change="paramValueChange($event,paramObj,'date_range_start')"  placeholder="开始日期"></el-date-picker>
                                    <span class="line"></span>
                                    <el-date-picker type="date" size="mini" format="yyyy.MM.dd" value-format='yyyy.MM.dd' v-model="paramObj.userSelection.endDate" @change="paramValueChange($event,paramObj,'date_range_end')"  placeholder="至今"></el-date-picker>
                                </div>

                                <div v-show="paramObj.baseParameterGroupParamList.length>0" class="operation">
                                    <i class="iconfont icontianjialiebiaoxiang" @click="dialogVisible_1_manualShow(paramObj)"></i>
                                </div>
                            </div>

                        </div>
                        <!-- <div class="deleteButton" v-show="allFieldList[mIndex].groupList[gIndex].section.length > 1"> -->
                        <div class="deleteButton" v-show="groupObj.id !='10100'">
                            <el-button type="danger" icon="el-icon-delete" size="mini" circle plain @click="deleteGroup(mIndex,gIndex,sectionIndex,groupObj.id)"></el-button>
                        </div>
                    </div>
                    <div class="bottomOperation">
                        <el-button v-show="parseInt(groupObj.attr1) == -1 || (allFieldList[mIndex].groupList[gIndex].section.length < parseInt(groupObj.attr1))" type="primary" size="mini" @click="addGroup(mIndex,gIndex)">新增</el-button>
                        <el-button type="primary" size="mini" @click="save(groupObj.id)" :loading="groupObj.isLoading">保存</el-button>
                    </div>
                </div>
            </div>
        </div>

        <div ref="bottomOperation" class="bottomOperation">
            <el-button type="warning" size="mini"  @click="infoPreview()">预览</el-button>
            <el-button ref='commitButton' @click="commit()" type="warning" size="mini" :loading="commitButtonIsLoading">提交</el-button>
        </div>

        <div class="rightSideTab">
            <div class="content" v-for="(moduleObj,mIndex) in allFieldList" :key="mIndex">
                <div class="moduleName" @click="rightSideTabModuleClick(moduleObj,mIndex)">{{moduleObj.moduleName}}</div>
                <div class="item" :rightSideItemId="item.id" :class="{active:item.id == activeGroup}" v-for="(item,gIndex) in moduleObj.groupList" :key="gIndex" @click="rightSideTabItemClick(item,mIndex,gIndex)">
                <div class="line"></div>
                    <div class="text">{{item.name}}</div>
                </div>
            </div>
        </div>

        <!-- 信息预览 -->
        <basicInformationPreview ref="infoPreview" class="infoPreview" :dataList="previewData" @commit="commit()"></basicInformationPreview>

        <!-- 弹框：二级数据 -->
        <el-dialog class="dialogVisible_1" :title="dialogVisible_1_title" :visible.sync="dialogVisible_1" width="90%" :show-close="false">
            <div class="content-table">
                <div class="dialogVisible_1_form">
                    <div>请在下方完善信息详情：</div>
                    <div class="functionButton">
                        <!-- <el-button v-show="parseInt(groupObj.attr1) == -1 || (allFieldList[mIndex].groupList[gIndex].section.length < parseInt(groupObj.attr1))" type="primary" size="mini" @click="addGroup(mIndex,gIndex)">新增</el-button> -->
                        <el-button v-show="dialogVisible_1_data.length < dialogVisible_1_max_count" type="primary" @click="dialogVisible_1_addData()" size="mini">新增</el-button>
<!--                        <div>-->
<!--                            <el-button type="primary" size="mini" @click="$event.currentTarget.nextSibling.click();">导入表格</el-button>-->
<!--                            <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" @change="currentGroup={id:dialogVisible_1_data[0][0].groupId,name:dialogVisible_1_title};importData($event)" style="display:none;">-->
<!--                        </div>-->
                        <el-button type="primary" @click="exportData(dialogVisible_1_data[0][0].groupId,'',dialogVisible_1_title)" size="mini">导出</el-button>
                    </div>
                </div>
              
                <el-table :data="dialogVisible_1_data" border size="mini" style="width: 100%" header-row-class-name="table-header">

                    <el-table-column prop="headObj.userSelection" :label="headObj.name" v-for="(headObj,headIndex) in dialogVisible_1_data_model" :key="headIndex" align="center">
                         <template slot-scope="scope">
                             <div class="formItem" :class="[{unsaved:unsavedParamIdList.indexOf(findParamKey(scope.row[headIndex])) != -1}]">
                                <!-- {{scope.row[headIndex]}} -->
                                <el-input :ref="findParamKey(scope.row[headIndex])" v-if="scope.row[headIndex].type == 'text'" :type="scope.row[headIndex].typeValidate=='integer'?'number':'text'" class="value" size="mini" @input="paramValueChange($event,scope.row[headIndex])" v-model="scope.row[headIndex].userSelection.parameterValue" placeholder="请输入内容"></el-input>

                                 <el-input v-show="scope.row[headIndex].isShow" :ref="findParamKey(scope.row[headIndex])" v-else-if="scope.row[headIndex].type == 'textarea'" type="textarea" :rows="3" @input="paramValueChange($event,scope.row[headIndex])" class="value" size="mini" v-model="scope.row[headIndex].userSelection.parameterValue" placeholder="请输入内容"></el-input>
                                
                                <textSelect :ref="findParamKey(scope.row[headIndex])" class="value" v-else-if="scope.row[headIndex].type == 'select&text'" :options='scope.row[headIndex].options' v-model="scope.row[headIndex].userSelection.parameterValue" @input="paramValueChange($event,scope.row[headIndex])" ></textSelect>

                                <div :ref="findParamKey(scope.row[headIndex])" class="value file"  v-else-if="scope.row[headIndex].type == 'file'" :style="scope.row[headIndex].userSelection.parameterValue=='正在上传...'?'pointer-events:none;':''">
                                    <el-input type="text" class="value" size="mini" placeholder=""></el-input>
                                    <div class="fileContent" :class="{has:scope.row[headIndex].userSelection.parameterValue.length > 0}" >
                                        <label class="name">
                                            <div v-text="scope.row[headIndex].userSelection.parameterValue.length>0?(scope.row[headIndex].userSelection.parameterValue.split('/')[scope.row[headIndex].userSelection.parameterValue.split('/').length-1]):'选择文件'">选择文件</div>
                                            <input type="file" @change="paramValueChange($event,scope.row[headIndex])" placeholder="请输入内容">
                                        </label>
                                        <div class="close" @click="deleteAttachment(scope.row[headIndex])"><i class="el-icon-circle-close"></i></div>
                                    </div>
                                </div>

                                <el-select :ref="findParamKey(scope.row[headIndex])" v-else-if="scope.row[headIndex].type == 'select'" class="value" size="mini" @change="paramValueChange($event,scope.row[headIndex])"  v-model="scope.row[headIndex].userSelection.parameterValue" placeholder="请选择">
                                    <el-option
                                    v-for="oItem in scope.row[headIndex].options"
                                    :key="oItem.id"
                                    :label="oItem.name"
                                    :value="oItem.name">
                                    </el-option>
                                </el-select>
                                
                                <el-date-picker :ref="findParamKey(scope.row[headIndex])" v-else-if="scope.row[headIndex].type == 'date_day'"  format="yyyy.MM.dd" value-format='yyyy.MM.dd' type="date" class="value"  size="mini"  @change="paramValueChange($event,scope.row[headIndex])" v-model="scope.row[headIndex].userSelection.parameterValue" placeholder="选择日期"></el-date-picker>
                                <el-date-picker :ref="findParamKey(scope.row[headIndex])" v-else-if="scope.row[headIndex].type == 'date_month'"  format="yyyy.MM" value-format='yyyy.MM' type="month" class="value"  size="mini" @change="paramValueChange($event,scope.row[headIndex])"  v-model="scope.row[headIndex].userSelection.parameterValue" placeholder="选择日期"></el-date-picker>
                                <el-date-picker :ref="findParamKey(scope.row[headIndex])" v-else-if="scope.row[headIndex].type == 'date_year'"  format="yyyy" value-format='yyyy' type="year" class="value"  size="mini" @change="paramValueChange($event,scope.row[headIndex])" v-model="scope.row[headIndex].userSelection.parameterValue" placeholder="选择日期"></el-date-picker>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column width="80px">
                        <template slot-scope="scope">
                            <el-button type="danger" size="mini" plain @click="dialogVisible_1_deleteData(scope.row,scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <span slot="footer" class="dialogVisible_1_footer dialog-footer">
                    <el-button @click="dialogVisible_1 = false" size="mini">关 闭</el-button>
                    <el-button type="primary" @click="dialogVisible_1_saveData(dialogVisible_1_data[0][0].groupId)" size="mini">保 存</el-button>
                </span>
            </div>
        </el-dialog>

        <!-- 弹框：导入数据弹框 -->
        <el-dialog title="" :visible.sync="dialogVisible_2" width="20%">
            <div class="dialogVisible_2_content">
                <div class="download">
                    <el-button type="primary" size="mini" round @click="exportModel(currentGroup.id,'',currentGroup.name)">下载模板</el-button>
                    <div>（若已下载，可直接略过）</div>
                </div>
                <div class="import">
                    <el-button type="primary" size="mini" round @click="$event.currentTarget.nextSibling.click();">导入表格</el-button>
                    <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" @change="importData($event)" style="display:none;">
                    <div>（必须以模板形式导入）</div>
                </div>
            </div>
        </el-dialog>

        <!-- 弹框：文件上传提示 -->
        <div ref="fileUploadLoading" class="fileUploadLoading">
            <div class="content">
                <i class="el-icon-loading"></i> 正在上传...
            </div>
        </div>

    </div>
</template>

<script>

import basicInformationPreview from "./BasicInformationPreview";

import { infoEntryUploadImagePost,infoEntryAllFieldPost,infoEntryEnteredDataPost,infoEntryEnteredExportModelGet,infoEntryEnteredImportPost,infoEntryEnteredSavePost,infoEntryQaCategoriesPost,infoEntryCategoryTypePost,infoEntryGoupFieldPost,infoEntryUploadFilePost,infoEntryCommitPost} from '@/service/api'

import { regularJudgmentParam,attachmentDesAirspace,processingAssociatedFields,infoProcessing,getParamKey,findParamByKey,makeParamKey,processingGroup,processingParameters,processingUserSection,findGroupById,processingParamValueByType } from '../../service/personalInfoDataProcessing'

import textSelect from "../../components/TextSelect";

/* global _ */
export default {
    name:"basicInformation",
    components:{
        basicInformationPreview,
        textSelect
    },
    data(){
        return {
            // 二级弹框 - 组数据
            dialogVisible_1:false,
            dialogVisible_1_param_userSelection:"",
            dialogVisible_1_title:"",
            dialogVisible_1_param_id:"",
            dialogVisible_1_data:[],
            dialogVisible_1_max_count:10,
            dialogVisible_1_data_model:[],
            
            // 二级弹框 - 导入/导出
            dialogVisible_2:false,

            allFieldList:[],
            previewData:[], // 预览数据

            // 处理过的所有字段，Map<参数ID，参数值>形式
            allFieldMap:new Map(),
            // 未保存的参数ID数组
            unsavedParamIdList:[],

            // 右侧tab栏当前选中的组
            activeGroup:"",

            // 导入导出时，当前选中的组
            currentGroup:"",

            // 职称分类option数据
            qaCategoriesData:[],


            // 是否处理页面滚动操作
            isPageScrollOperation:true,

            // 提交按钮状态
            commitButtonIsLoading:false,

            timer:null,
        }
    },
    created(){
        this.loadBaseAllField();
    },
    mounted(){

        // 监听鼠标滚动
        document.getElementById("baseInfo-container").parentNode.addEventListener('scroll',this.handleScroll,true);
    },
    methods:{
        // 二级弹框 - js手动展示
        dialogVisible_1_manualShow(param){
            
            if(param.baseParameterGroups.length <= 0){
                return;
            }
            var count = param.baseParameterGroups[0].attr1;
            if(parseInt(count) == -1){
                this.dialogVisible_1_max_count = 10000;
            }else{
                this.dialogVisible_1_max_count = parseInt(count);
            }
            this.dialogVisible_1_show(null,param,param.name);
        },
        // 二级弹框 - 展示
        dialogVisible_1_show(event,param,title){
            if(event != null){
                event.target.blur();
            }
            this.dialogVisible_1_title = title;
            this.dialogVisible_1_param_userSelection = param.userSelection;
            this.dialogVisible_1_param_id = param.id;
            this.dialogVisible_1_data = param.baseParameterGroupParamList;
            this.dialogVisible_1_data_model = JSON.parse(JSON.stringify(param.baseParameterGroupParamList[0]));
            this.dialogVisible_1 = true;
        },
        // 二级弹框 - 添加数据
        dialogVisible_1_addData(){
            var curentOrder = 0;
            if(this.dialogVisible_1_data.length > 0){
                let maxOrder = this.dialogVisible_1_data[this.dialogVisible_1_data.length - 1][0].maxOrder;
                curentOrder = this.dialogVisible_1_data[this.dialogVisible_1_data.length - 1][0].userSelection.orders;
                if(parseInt(maxOrder) > parseInt(curentOrder)){
                    curentOrder = maxOrder;
                }
            }
            console.log("orders:" + curentOrder);

            for(var i=0;i<this.dialogVisible_1_data_model.length;i++){
                this.dialogVisible_1_data_model[i].userSelection = {
                    orders:curentOrder + 1,
                    parameterValue:""
                };

                var key_io = getParamKey(this.dialogVisible_1_data_model[i]);
                this.allFieldMap.set(key_io,this.dialogVisible_1_data_model[i].userSelection.parameterValue);
            }
            this.dialogVisible_1_data_model[i-1].isShow = false;
            var d = JSON.parse(JSON.stringify(this.dialogVisible_1_data_model)); // 深复制;
            this.dialogVisible_1_data.push(d);
        },
        // 二级弹框 - 删除数据
        dialogVisible_1_deleteData(item,index){
            if(this.dialogVisible_1_data.length == 1){
                for(var i=0;i<this.dialogVisible_1_data[0].length;i++){
                    this.dialogVisible_1_data[0][i].userSelection.parameterValue = "";
                    this.dialogVisible_1_data[0][i].userSelection.startDate = ""
                    this.dialogVisible_1_data[0][i].userSelection.endDate = ""
                }
            }else{
                this.dialogVisible_1_data.splice(index,1);
            }

            // 更新参数原始值，及保存状态
            var that = this;
            item.forEach(function(param){
                let key = getParamKey(param);

                // 更新保存状态
                that.unsavedParamIdList.remove(key);

                // 更新原始值
                that.allFieldMap.set(key,param.userSelection.parameterValue);

            });
            
        },
        // 二级弹框 - 保存数据
        dialogVisible_1_saveData(groupId){
            // this.dialogVisible_1 = false;
            
            // 保存二级组
            this.save(groupId);
        },
        // 公共 - 获取参数key
        findParamKey(param){
            return getParamKey(param);
        },
        // 页面字段 - 监听字段值输入、变化
        paramValueChange(event,param,type1){

            var groupId = param.groupId;
            var paramId = param.id;
            var orders  = param.userSelection.orders
            var key = getParamKey(param);

            // 日期控件的值可能为null
            event = event==null?"":event;

            // 0.1> 是否军队级以上金课
            if("10200-013" == paramId){
                
                // var param1 = findParamByKey(makeParamKey(param.groupId,"10200-015",param.userSelection.orders),this.allFieldList);
                // if(event == "是"){ // 是：显示金课排名
                //     // 页面字段 - 显示或隐藏指定字段
                //     param1.isShow = true;
                //
                // }else{ // 否：隐藏金课排名
                //     param1.isShow = false;
                // }
            }else if("10100-027" == paramId){ 
            // 0.2> 职称评审 - 现职称所属领域

                var paramList = this.allFieldList[0].groupList[0].section[0];

                for(var i=0;i<paramList.length;i++){
                    if("10100-027" == paramList[i].id){ 

                        // 职称评审 - 现职称所属类型
                        for(var pindex = 0;pindex < paramList[i].options.length;pindex++){
                            if(paramList[i].options[pindex].name == paramList[i].userSelection.parameterValue){
                                paramList[i+1].userSelection.parameterValue = "";
                                paramList[i+2].userSelection.parameterValue = "";
                                paramList[i+1].options = paramList[i].options[pindex].childList;
                                break;
                            }
                        }
                        break;
                    }
                }

            }else if("10100-028" == paramId){
            // 0.3> 职称评审 - 现职称所属领域

            }else if("10500-007" == paramId){
            // 0.4> 指导的研究生学位论文在各级抽查中有无不合格
                if(event == "有"){
                    // this.dialogVisible_1_manualShow(paramId,"指导的研究生学位论文在各级抽查中不合格者");
                }
            }else if("10500-005" == paramId){
            // 0.5> 指导硕士生或博士生数量（人）
            //     if(parseInt(event) == 0){
            //         param.isDisabledBaseParameterGroup = true;
            //     }else{
            //         param.isDisabledBaseParameterGroup = false;
            //     }
            }else if("10100-018" == paramId){
            // 0.6> 现专业技术职务
                this.findCategoryTypePost(event,true);
            }

            if(event instanceof Event && event.target.files instanceof FileList){
                if(event.target.files.length <= 0){
                    // this.uploadAttachment();
                }else{

                    if(param.type == "img"){ // 上传图片
                        this.uploadImage(param,event);
                    }else if(param.type == "file"){ // 上传文件
                        this.uploadAttachment(param,event);
                    }
                }
            }
            
            var value = this.allFieldMap.get(key)
            // 额外的类型判断
            var dateValueArray = value.split("-");
            if(type1 == "date_range_start"){
                value = dateValueArray[0];
                
            }else if(type1 == "date_range_end"){
                value = dateValueArray.length>1?dateValueArray[1]:"";
            }

            if(type1 == "date_range_start" || type1 == "date_range_end"){
                if(param.userSelection.startDate == null || param.userSelection.startDate == ""){
                    param.userSelection.parameterValue = "";
                }else if(param.userSelection.endDate == null || param.userSelection.endDate == ""){
                    param.userSelection.parameterValue = param.userSelection.startDate + "-至今";
                }else{
                    param.userSelection.parameterValue = param.userSelection.startDate + "-" + param.userSelection.endDate;
                }
            }

            if(value == event){ // 参数值未发生变化时
                this.unsavedParamIdList.remove(key);
            }else{ // 参数值已变更时
                if(this.unsavedParamIdList.indexOf(key) == -1){
                    this.unsavedParamIdList.push(key);
                }
            }

            // 处理关联字段
            processingAssociatedFields(param,this.allFieldList);

        },
        // 页面字段 - 上传附件
        uploadAttachment(param,event){

            var that = this;
            
            var size = event.target.files[0].size/1024/1024;
            if(size > 100){
                this.$message({message: '附件大小不能超过100M',type: 'error'});
                return;
            }
            
            this.$refs.fileUploadLoading.style.display = 'flex';
            // param.userSelection.parameterValue = "正在上传...";

            var formData = new FormData;
            formData.append("multipartFiles",event.target.files[0]);
            formData.append("groupId",param.groupId);
            formData.append("parameterId",param.id);
            formData.append("orders",param.userSelection.orders);
            
            infoEntryUploadFilePost(formData).then(res => {
                if(res.code == 200){
                    var p = res.data[0];
                    var key = makeParamKey(p.groupId,p.parameterId,p.orders);
                    var param = findParamByKey(key,that.allFieldList);
                    param.userSelection.parameterValue = p.url;

                    // 处理关联字段
                    processingAssociatedFields(param,that.allFieldList);
                }
            }).finally(function () {  
                event.target.value = "";
                that.$refs.fileUploadLoading.style.display = 'none';
            });
        },
        // 页面字段 - 上传图片
        uploadImage(param,event){

            var that = this;

            var size = event.target.files[0].size/1024/1024;
            if(size > 10){
                this.$message({message: '图片大小不能超过10M',type: 'error'});
                return;
            }

            this.$refs.fileUploadLoading.style.display = 'flex';
            // param.userSelection.parameterValue = "正在上传...";

            var oParam = param;
            var formData = new FormData;
            formData.append("multipartFiles",event.target.files[0]);
            infoEntryUploadImagePost(formData).then(res => {
                if(res.code == 200){
                    var param = findParamByKey(getParamKey(oParam),that.allFieldList);
                    param.userSelection.parameterValue = res.message;
                }
            }).finally(function () {
                event.target.value = "";
                that.$refs.fileUploadLoading.style.display = 'none';
            });
        },
        // 页面字段 - 删除附件
        deleteAttachment(paramObj){

            paramObj.userSelection.parameterValue='';

            var key = getParamKey(paramObj);
            if(this.unsavedParamIdList.indexOf(key) == -1){
                this.unsavedParamIdList.push(key);
            }

            processingAssociatedFields(paramObj,this.allFieldList);
        },
        // 页面字段 - 加载页面所有字段\值
        loadBaseAllField(){
            infoEntryAllFieldPost().then(res => {
                console.time("loadTime");
                if(res.code == 200){
                    var that = this;
                    var result = infoProcessing(res.data,function(param){
                        that.findCategoryTypePost(param.userSelection.parameterValue,false);
                    });
                    this.allFieldList = result.allFieldList; // 所有数据字段
                    this.activeGroup  = result.activeGroup;  // 当前被选中的组
                    this.allFieldMap  = result.allFieldMap;  // 所有原始字段，用于对比字段值是否被保存
                }
                
                // 加载职称分类option数据列表
                this.findQaCategories();
                console.timeEnd("loadTime");
            });
        },
        // 页面字段 - 将指定字段滚动至可视区域内
        displayFieldToVisibleArea(paramId){
            var ele = this.$refs[paramId][0];
            if(ele == undefined){
                return;
            }
            if(Object.prototype.toString.call(ele) != "[object HTMLDivElement]"){
                ele = ele.$el;
            }
            // scrollIntoView 用于将元素滚动到可视区域内，使用详见：https://www.jianshu.com/p/32bef36a68a0
            ele.scrollIntoView({block: "center"});
        },
        // 右侧导航栏 - 点击模块
        rightSideTabModuleClick(moduleObj,mIndex){
            this.isPageScrollOperation = false;

            // scrollIntoView 用于将元素滚动到可视区域内，使用详见：https://www.jianshu.com/p/32bef36a68a0
            document.getElementById("module_" + mIndex).scrollIntoView({block: "start"});

            var that = this;
            this.timer = setTimeout(function(){
                that.isPageScrollOperation = true;
                // 删除定时器
                clearTimeout(that.timer);
            },300); 
        },
        // 右侧导航栏 - 点击组
        rightSideTabItemClick(item,mIndex,gIndex){
            this.activeGroup = item.id;

            this.isPageScrollOperation = false;

            // scrollIntoView 用于将元素滚动到可视区域内，使用详见：https://www.jianshu.com/p/32bef36a68a0
            document.getElementById(item.id).scrollIntoView({block: "center"});

            var that = this;
            this.timer = setTimeout(function(){
                that.isPageScrollOperation = true;
                // 删除定时器
                clearTimeout(that.timer);
            },300); 

            // 延时执行
            document.getElementById(item.id).setAttribute('style', 'background: #f4f7ff;');
            setTimeout(function(){ 
                document.getElementById(item.id).setAttribute('style', 'background:while;');
            }, 1000,item.id);
        },
        // 页面 - 滚动页面监听
        handleScroll(e){  

            if(e.target.className.indexOf("el-main") == -1){
                return;
            }

            var that = this;
            setTimeout(function () {
                if(e.target.classList[0] == "rightSideTab"){
                    return true;
                }
                
                if(!that.isPageScrollOperation){
                    return;
                } 

                // 默认情况下，将垂直中点距离顶部为 basePoint 的组设为当前选中的组；
                // 因此,如下逻辑将从众多组中选中垂直中点距离顶部最接近 basePoint 的组
                var basePoint = 200;

                // 获取所有组元素
                var allGroup = document.querySelectorAll("#baseInfo-container .group");

                var chosenElement = null,choseElementTop = 100000000,cTemp=0;
                for(var i=0;i<allGroup.length;i++){
                    // 获取组元素垂直中点距浏览器顶部的距离
                    cTemp = (allGroup[i].getBoundingClientRect().top - basePoint) + allGroup[i].offsetHeight/2.0;
                    
                    // 获取与 basePoint 绝对距离最小的组元素
                    if(Math.abs(cTemp) < Math.abs(choseElementTop)){
                        choseElementTop = cTemp;
                        chosenElement = allGroup[i];
                    }
                }
                if(chosenElement == null){
                    return;
                }
                // 打印当前被选中的组ID
                // console.log(chosenElement.getAttribute("id"));
                that.activeGroup = chosenElement.getAttribute("id");

                var tabItem = document.querySelector('[rightSideItemId="'+ chosenElement.getAttribute("id") +'"]');
                // var v = tabItem.getBoundingClientRect();
                // console.log(v);

                // scrollIntoView 用于将元素滚动到可视区域内，使用详见：https://www.jianshu.com/p/32bef36a68a0
                if(tabItem != null && tabItem != undefined){
                    tabItem.scrollIntoView({block: "center"});
                }
                
            },10);
            
        },
        // 保存
        save(groupId,callback){

            // 0.1> 基本信息必填检查
            if(groupId ==  "10100"){
                for(var baseInfo_i=0;baseInfo_i<this.allFieldList.length;baseInfo_i++){
                    for(var baseInfo_e=0;baseInfo_e<this.allFieldList[baseInfo_i].groupList.length;baseInfo_e++){
                        var baseInfo_group = this.allFieldList[baseInfo_i].groupList[baseInfo_e];
                        for(var baseInfo_sIndex=0;baseInfo_sIndex<baseInfo_group.section.length;baseInfo_sIndex++){

                            if(baseInfo_group.id !=  "10100"){
                                continue;
                            }
                            var baseInfo_paramList = baseInfo_group.section[baseInfo_sIndex];
                            for(var baseInfo_pIndex=0;baseInfo_pIndex<baseInfo_paramList.length;baseInfo_pIndex++){
                                if(baseInfo_paramList[baseInfo_pIndex].id != '10000'){
                                    let param = baseInfo_paramList[baseInfo_pIndex];
                                    if(param.isShow != true){
                                        // 仅检查已显示的字段
                                        continue;
                                    }

                                    var baseInfo_value = param.userSelection.parameterValue;
                                    if(baseInfo_value == null || baseInfo_value == undefined || baseInfo_value.toString().trim().length <= 0){
                                        this.$alert('除附件之外，其它信息均为必填，请确认后再保存！', '提示', {
                                                confirmButtonText: '确定'
                                        });
                                        return;
                                    }
                                    
                                }
                            }
                        }
                    }
                }
            }

            // 0.2> 判断必填的关联字段
            var msg = attachmentDesAirspace(groupId,this.allFieldList);
            if(msg != undefined){
                this.$message({message:msg,type: 'error'});
                return
            }

            // 0.3> 正则验证所有参数格式
            msg = regularJudgmentParam(groupId,this.allFieldList);
            if(msg != undefined){
                this.$message({message:msg,type: 'error'});
                return
            }

            // 0.4> 设置组状态
            this.setGroupLoading(groupId,true);


            // 1.0> 将字段转为可提交的参数
            var dataList = JSON.parse(JSON.stringify(this.allFieldList));
            var valueList = [];
            for(var i=0;i<dataList.length;i++){
                for(var e=0;e<dataList[i].groupList.length;e++){
                    var group = dataList[i].groupList[e];

                    // 优先寻找一级组
                    if(group.id == groupId){
                        this.conversionSectionToParam(valueList,group.section);
                    }else{

                        // 寻找二级组，保存二级表时会用到
                        for(var sIndex=0;sIndex<group.section.length;sIndex++){
                            var paramList = group.section[sIndex];

                            for(var pIndex=0;pIndex<paramList.length;pIndex++){
                                if(paramList[pIndex].baseParameterGroupParamList.length>0 &&  groupId == paramList[pIndex].baseParameterGroupParamList[0][0].groupId){
                                    // group.isLoading = true;
                                    this.conversionSectionToParam(valueList,paramList[pIndex].baseParameterGroupParamList);
                                }
                            }
                        }
                    }
                }
            }



            // 1.1> 超时停止按钮上的loading
            var that = this;

            var formData = new FormData;
            formData.append("list",JSON.stringify(valueList));
            formData.append("groupId",groupId);
            infoEntryEnteredSavePost(formData).then(res => {
                if(res.code == 200){

                    // 1.0 为二级表的触发字段赋值；即，保存二级表中，更新一级表中的对应字段
                    var fieldList = res.data.parentValue;
                    if(fieldList != undefined && fieldList != ""){

                        fieldList.forEach(function (field) {
                            var fieldValue = field.attr1;
                            var key = makeParamKey(field.groupId,field.id,that.dialogVisible_1_param_userSelection.orders);
                            var param = findParamByKey(key,that.allFieldList);

                            if(param.id === "10100-030" && fieldValue === ""){
                                param.userSelection.parameterValue = "0";
                            }else{
                                param.userSelection.parameterValue = field.attr1;
                            }

                            // 更新字段
                            that.paramValueChange(fieldValue,param);
                        })
                    }


                    // 2.0 更新已保存参数的 allFieldMap 和 unsavedParamIdList
                    var dataList = res.data.items;
                    var groupIdList = []
                    groupIdList.push(groupId);
                    for(var i=0;i<dataList.length;i++){
                              
                        var key_io = makeParamKey(dataList[i].groupId,dataList[i].parameterId,dataList[i].orders);
                        this.allFieldMap.set(key_io,dataList[i].parameterValue);

                        this.unsavedParamIdList.remove(key_io);

                        if(groupIdList.indexOf(dataList[i].groupId) == -1){
                            groupIdList.push(dataList[i].groupId);
                        }
                    }


                    // 0.3> 更新"空参数"组的 allFieldMap 和 unsavedParamIdList
                    //     当手动删除组中所有数据，并保存后；保存操作判断所有数据为空后，会仅向后台传递一个参数组ID，后台将对此执行删除操作；
                    //     并且删除完成后，不会返回任何字段，因此此处要单独更新此组中的所有数据状态
                    if(callback === undefined && dataList.length <= 0){
                        this.resetParamStatusByGroupId(res.data.groupId.split(",")[0]);
                    }


                    // 停止按钮上的loading
                    this.setGroupLoading(groupIdList,false);

                    if(callback != undefined){
                        callback();
                    }else{
                        this.$message({message: '保存成功！',type: 'success'});
                    }
                }else{
                    this.setGroupLoading(groupId,false);
                }
            }).finally(()=>{
                that.setGroupLoading(groupId,false);
            });
        },
        // 保存 - 重置指定组下所有参数状态
        resetParamStatusByGroupId(groupId){

            for(var mIndex=0;mIndex<this.allFieldList.length;mIndex++){
                var module = this.allFieldList[mIndex];
                for(var gIndex=0;gIndex<module.groupList.length;gIndex++){

                    var group = module.groupList[gIndex];
                    if(group.id == groupId){

                        // 寻找一级组
                        for(var sIndex=0;sIndex<group.section.length;sIndex++){

                            var paramList = group.section[sIndex];
                            for(var pIndex=0;pIndex<paramList.length;pIndex++){
                                let key_io = makeParamKey(paramList[pIndex].groupId,paramList[pIndex].id,paramList[pIndex].userSelection.orders);
                                this.allFieldMap.set(key_io,paramList[pIndex].userSelection.parameterValue);
                                this.unsavedParamIdList.remove(key_io);
                            }
                        }

                    }else{

                        // 寻找二级组
                        for(sIndex=0;sIndex<group.section.length;sIndex++){
                            paramList = group.section[sIndex];

                            for(pIndex=0;pIndex<paramList.length;pIndex++){
                                if(paramList[pIndex].baseParameterGroupParamList.length>0 &&  groupId == paramList[pIndex].baseParameterGroupParamList[0][0].groupId){

                                    var bpList = paramList[pIndex].baseParameterGroupParamList;
                                    for(var bpIndex=0;bpIndex<bpList.length;bpIndex++){
                                        for(var bpParamIndex=0;bpParamIndex<bpList[bpIndex].length;bpParamIndex++){
                                            var baseParam = bpList[bpIndex][bpParamIndex];
                                            let key_io = makeParamKey(baseParam.groupId,baseParam.id,baseParam.userSelection.orders);
                                            this.allFieldMap.set(key_io,paramList[pIndex].userSelection.parameterValue);
                                            this.unsavedParamIdList.remove(key_io);
                                        }
                                    }
                                }
                            }
                        }

                    }

                }
            }


        },
        // 保存 - 停止loading
        setGroupLoading(groupIdList,isLoading){

            // 停止按钮上的loading
            for(var mIndex=0;mIndex<this.allFieldList.length;mIndex++){
                var module = this.allFieldList[mIndex];
                for(var gIndex=0;gIndex<module.groupList.length;gIndex++){
                    var group = module.groupList[gIndex];
                    if(groupIdList instanceof Array){
                        if(groupIdList.indexOf(group.id) != -1){
                            group.isLoading = isLoading;
                        }
                    }else{
                        if(groupIdList === group.id){
                            group.isLoading = isLoading;
                        }
                    }

                }
            }
        },
        // 保存 - 将section数组转为能够提交的参数
        conversionSectionToParam(valueList,sectionList){
            // 遍历所有section
            for(var sIndex=0;sIndex<sectionList.length;sIndex++){

                var paramList = sectionList[sIndex];

                // 0.1> 遍历section中所有参数，排除空参数
                var isTo = false; // 是否继续，如果section中的所有参数都为空，则不保存此section
                for(var tpIndex=0;tpIndex<paramList.length;tpIndex++){

                    if(paramList[tpIndex].type.indexOf("date_month_range") != -1 || paramList[tpIndex].type.indexOf("date_day_range") != -1){
                        if((paramList[tpIndex].userSelection.startDate != null && paramList[tpIndex].userSelection.startDate != "") 
                        || (paramList[tpIndex].userSelection.endDate != null && paramList[tpIndex].userSelection.endDate != "")){
                            isTo = true;
                            break;
                        }
                    }else{
                        if(paramList[tpIndex].userSelection.parameterValue != null && paramList[tpIndex].userSelection.parameterValue != ""){
                            isTo = true;
                            break;
                        }
                    }
                }
                if(!isTo){
                    continue;
                }
                
                // 0.2> 遍历section中的所有参数
                for(var pIndex=0;pIndex<paramList.length;pIndex++){

                    if(paramList[pIndex].type == "date_month_range" || paramList[pIndex].type == "date_day_range"){
                        var startDate = paramList[pIndex].userSelection.startDate;
                        if(startDate instanceof Date){
                            startDate = startDate.format("yyyy-MM-dd");
                        }
                        var endDate = paramList[pIndex].userSelection.endDate;
                        if(endDate instanceof Date){
                            endDate = endDate.format("yyyy-MM-dd");
                        }
                        paramList[pIndex].userSelection.parameterValue = startDate + "|" + endDate;

                    }else if(paramList[pIndex].type.indexOf("date") != -1){
                        
                        var dateValue = paramList[pIndex].userSelection.parameterValue;
                        if(dateValue instanceof Date){
                            dateValue = dateValue.format("yyyy-MM-dd");
                            paramList[pIndex].userSelection.parameterValue = dateValue;
                        }                        
                    }

                    valueList.push({
                        "id":paramList[pIndex].id,
                        "orders":paramList[pIndex].userSelection.orders,
                        "parameterGroupId":paramList[pIndex].groupId,
                        "parameterId":paramList[pIndex].id,
                        "parameterValue":paramList[pIndex].userSelection.parameterValue
                    });

                    if(paramList[pIndex].baseParameterGroupParamList != undefined && paramList[pIndex].baseParameterGroupParamList.length > 0){
                        this.conversionSectionToParam(valueList,paramList[pIndex].baseParameterGroupParamList);
                    }
                }
            }
            return valueList;
        },
        // 保存 - 重置
        // 提交
        commit(){

            var that = this;
            if(this.unsavedParamIdList.length > 0){
                this.$alert('您有信息尚未保存，请保存后再提交！', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {

                        var eleList = that.$refs[that.unsavedParamIdList[0]];
                        while(eleList.length <= 0){
                            that.unsavedParamIdList.splice(0,1);
                            eleList = that.$refs[that.unsavedParamIdList[0]];
                        }

                        // 页面跳转至未保存的字段处
                        var unsaveParamId = that.unsavedParamIdList[0];

                        // 0.1> 如果未保存参数是二级表字段，则弹出二级框后，直接return出当前函数
                        for(var i=0;i<this.allFieldList.length;i++){
                            var groupList = this.allFieldList[i].groupList;
                            for(var gIndex=0;gIndex<groupList.length;gIndex++){
                                var sectionList = groupList[gIndex].section;
                                for(var sIndex=0;sIndex<sectionList.length;sIndex++){
                                    var paramList = sectionList[sIndex];
                                    for(var pIndex=0;pIndex<paramList.length;pIndex++){
                                        var param = paramList[pIndex];
                                        var baseParamSectionList = paramList[pIndex].baseParameterGroupParamList;
                                        for(var bpsIndex=0;bpsIndex<baseParamSectionList.length;bpsIndex++){
                                            var baseParamList = baseParamSectionList[bpsIndex];
                                            for(var bpIndex=0;bpIndex<baseParamList.length;bpIndex++){
                                                var baseParam = baseParamList[bpIndex];
                                                if(getParamKey(baseParam) == unsaveParamId){

                                                    // 弹出参数二级框
                                                    that.dialogVisible_1_manualShow(param);
                                                    // 滚动页面至参数处
                                                    // that.$refs[getParamKey(param)][0].$el.scrollIntoView({block: "center"});
                                                    that.displayFieldToVisibleArea(getParamKey(param));

                                                    return;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        // 0.2> 如果未保存参数是一级表字段
                        this.displayFieldToVisibleArea(unsaveParamId);

                    }
                });
                return;
            }


            this.$confirm('请先预览所有信息，确认无误后再提交！', '提示', {
                distinguishCancelAndClose: true,
                confirmButtonText: '继续提交',
                cancelButtonText: '现在去预览',
                type: 'warning'
            }).then(() => {

                that.commitButtonIsLoading = true;
                infoEntryCommitPost().then(res => {
                    if(res.code == 200){
                        that.$message({message: '提交成功！',type: 'success'});
                    }
                }).finally(function () {
                    that.commitButtonIsLoading = false;
                });
            }).catch((action) => {
                if(action == "cancel"){
                    that.infoPreview();
                }
            });

        },
        // 功能 - 导出模板
        exportModel(groupId,moduleName,fileName){

            infoEntryEnteredExportModelGet({
                method: 'get',
                url: '/admin/baseParameterGroup/exportModel1?groupId=' + groupId + "&typeId=" + moduleName,
                responseType: 'blob', // important
                // headers: { "Content-Type": "multipart/form-data" }
            }).then(res => {
                const url = window.URL.createObjectURL(new Blob([res]));
                const link = document.createElement('a');
                link.href = url;

                // if(res.type == "application/octet-stream"){
                //     link.setAttribute('download',moduleName + '-模块.zip');
                // }else{
                    link.setAttribute('download',fileName + '.xlsx');
                // }
                document.body.appendChild(link);
                link.click();
            });
        },
        // 功能 - 导出数据
        exportData(groupId,moduleName,fileName){

            infoEntryEnteredExportModelGet({
                method: 'get',
                url: '/admin/baseParameterGroup/exportModel?groupId=' + groupId + "&typeId=" + moduleName,
                responseType: 'blob', // important
                // headers: { "Content-Type": "multipart/form-data" }
            }).then(res => {
                const url = window.URL.createObjectURL(new Blob([res]));
                const link = document.createElement('a');
                link.href = url;

                // if(res.type == "application/octet-stream"){
                //     link.setAttribute('download',moduleName + '-模块.zip');
                // }else{
                    link.setAttribute('download',fileName + '.xlsx');
                // }
                document.body.appendChild(link);
                link.click();
            });

        },
        // 功能 - 导入数据
        importData(event){
            var formData = new FormData;
            formData.append("multipartFile",event.target.files[0]);
            if(this.currentGroup == null){
                formData.append("modelName","all");
            }else{
                formData.append("modelName",this.currentGroup.name);
            }
            
            infoEntryEnteredImportPost(formData).then(res => {
                if(res.code == 200){

                    this.dialogVisible_2 = false;
                  //   this.$message({message: '导入成功！',type: 'success'});

                    // 整理返回数据
                  //   var groupIdList = [];
                  //   for(var i=0;i<res.data.length;i++){
                  //       if(groupIdList.indexOf(res.data[i].groupId) == -1){
                  //           groupIdList.push(res.data[i].groupId);
                  //       }
                  //   }
                  //   this.goupField(groupIdList);

                    // 更新未保存数据
                  //   for(i=0;i<res.data.length;i++){
                  //       var key_io = makeParamKey(res.data[i].groupId,res.data[i].parameterId,res.data[i].orders);
                  //       this.allFieldMap.set(key_io,res.data[i].parameterValue);

                  //       this.unsavedParamIdList.remove(key_io);
                  //   }


                     // 设置原始参数值，和保存状态
                     let groupID = 0;
                     for(let i=0;i<res.data.length;i++){
                        for(let pIndex=0;pIndex<res.data[i].length;pIndex++){
                           let param = res.data[i][pIndex];
                           var key_io = makeParamKey(param.groupId,param.parameterId,param.orders);
                           this.allFieldMap.set(key_io,"");
                           this.unsavedParamIdList.push(key_io);
                           
                           if(groupID === 0){
                              groupID  = param.groupId;
                           }
                           
                        }
                     }

                     // 填充参数至页面
                     var groupList = findGroupById(groupID,this.allFieldList);
                     let groupTemplate = JSON.parse(JSON.stringify(groupList[0]));

                     // groupList = 
                     groupList.splice(0,groupList.length);
                     for(let i=0;i<res.data.length;i++){ // 遍历section

                        groupTemplate = JSON.parse(JSON.stringify(groupTemplate));

                        // 重置所有orders和参数值
                        for(let gtIndex=0;gtIndex<groupTemplate.length;gtIndex++){
                           groupTemplate[gtIndex].userSelection.parameterValue = "";
                           groupTemplate[gtIndex].userSelection.orders         = i;
                        }

                        for(let pIndex=0;pIndex<res.data[i].length;pIndex++){ // 遍历参数

                           let param = res.data[i][pIndex];
                           for(let gtIndex=0;gtIndex<groupTemplate.length;gtIndex++){
                              if(groupTemplate[gtIndex].id === param.parameterId){
                               
                                 groupTemplate[gtIndex].userSelection.parameterValue = param.parameterValue;
                                 groupTemplate[gtIndex].userSelection.orders         = i;
                                 groupTemplate[gtIndex].typeValidate                 = param.typeValidate;
                                 groupTemplate[gtIndex].type                         = param.type;

                                 processingParamValueByType(groupTemplate[gtIndex]);
                              }
                           }
                        }
                        groupList.push(groupTemplate);
                     }

                }
            });
            event.target.value = "";
        },
        // 功能 - 导入数据 - 获取指定组的字段\值,并填入到页面
        goupField(grouIdList){
            var formData = new FormData;
            formData.append("groupId",JSON.stringify(grouIdList));
            infoEntryGoupFieldPost(formData).then(res => {
                if(res.code == 200){
                     for(var mIndex=0;mIndex<this.allFieldList.length;mIndex++){

                        var module = this.allFieldList[mIndex];
                        for(var gIndex=0;gIndex<module.groupList.length;gIndex++){

                            var group = module.groupList[gIndex];
                            for(var reIndex=0;reIndex<res.data.length;reIndex++){
                                // 优先寻找二级组
                                if(group.id == res.data[reIndex].id){
                                    var g = res.data[reIndex];
                                    processingGroup(g);
                                    group.section = g.section;
                                }else{
                                    // 寻找二级组
                                    for(var sIndex=0;sIndex<group.section.length;sIndex++){
                                        var paramList = group.section[sIndex];
                                        for(var pIndex=0;pIndex<paramList.length;pIndex++){
                                            if(paramList[pIndex].baseParameterGroupParamList.length>0 &&  res.data[reIndex].id == paramList[pIndex].baseParameterGroupParamList[0][0].groupId){
                                                
                                                var param = paramList[pIndex];
                                                param.baseParameterGroupParamList = [];

                                                var baseParameterGroups = res.data[0];

                                                // 处理userSelection，填充为空的值
                                                processingUserSection(baseParameterGroups.parameters[0]);

                                                var baseSectionLength = baseParameterGroups.parameters[0].userSelection.length;
                                                if(baseSectionLength <= 0){
                                                    baseSectionLength = 1;
                                                }
                                                for(var bsIndex=0;bsIndex<baseSectionLength;bsIndex++){
                                                    // 处理参数
                                                    var baseParamList = processingParameters(JSON.parse(JSON.stringify(baseParameterGroups.parameters)),bsIndex);
                                                    param.baseParameterGroupParamList.push(JSON.parse(JSON.stringify(baseParamList)));
                                                }
                                                this.dialogVisible_1_data = param.baseParameterGroupParamList;
                                            }
                                        }
                                    }

                                }

                            }
                            
                        }
                     }
                    
                }
            });

        },
        // 功能 - 添加组的section
        addGroup(mIndex,gIndex){
            var sectionList = this.allFieldList[mIndex].groupList[gIndex].section;
            var paramList = JSON.parse(JSON.stringify(sectionList[sectionList.length -1]));

            var maxOrder = parseInt(paramList[0].maxOrder);
            var order    = parseInt(paramList[0].userSelection.orders);
            console.log(maxOrder,order);
            if(maxOrder > order){
                order = maxOrder;
            }
            ++order;

            for(var i=0;i<paramList.length;i++){
                paramList[i].maxOrder = order;
                paramList[i].userSelection.parameterValue = "";
                paramList[i].userSelection.startDate = "";
                paramList[i].userSelection.endDate = "";
                paramList[i].userSelection.orders = order;

               var key_io = getParamKey(paramList[i]);
               this.allFieldMap.set(key_io,paramList[i].userSelection.parameterValue);


               // 重置保存状态，防止其它逻辑的冗余错误
               this.unsavedParamIdList.remove(key_io);
            }
            this.allFieldList[mIndex].groupList[gIndex].section.push(paramList);

            // 处理关联字段
            var that = this;
            paramList.forEach(function(param){
                processingAssociatedFields(param,that.allFieldList);
            });
        },
        // 功能 - 删除组的section
        deleteGroup(mIndex,gIndex,sectionIndex,groupId){

            var that = this;
            this.$confirm('确定删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                var groupIdList = [];
                var sectionList = that.allFieldList[mIndex].groupList[gIndex].section;
                if(sectionList.length == 1){ // 只有一个seciton时
                    var firstSection = sectionList[0];
                    for(var i=0;i<firstSection.length;i++){


                        // 获取当前section所有二级表groupId，用于删除二级表；
                        if(firstSection[i].baseParameterGroupParamList.length > 0){
                            groupIdList.push(firstSection[i].baseParameterGroupParamList[0][0].groupId);

                            var _paramGroup =  JSON.parse(JSON.stringify(firstSection[i].baseParameterGroupParamList[0]));
                            _paramGroup.forEach(function(param){
                                param.userSelection.parameterValue = "";
                                param.userSelection.orders = 1;
                                if(param.userSelection.startDate != undefined){
                                    param.userSelection.startDate = "";
                                }
                                if(param.userSelection.endDate != undefined){
                                    param.userSelection.endDate = "";
                                }
                            });

                            firstSection[i].baseParameterGroupParamList = [];  // 清空
                            firstSection[i].baseParameterGroupParamList.push(_paramGroup);
                        }

                        // 删除旧的
                        let oldKey = getParamKey(firstSection[i]);
                        that.allFieldMap.delete(oldKey);
                        that.unsavedParamIdList.remove(oldKey);

                        firstSection[i].userSelection.parameterValue = "";
                        firstSection[i].userSelection.orders = 1;
                        if(firstSection[i].userSelection.startDate != undefined){
                            firstSection[i].userSelection.startDate = "";
                        }
                        if(firstSection[i].userSelection.endDate != undefined){
                            firstSection[i].userSelection.endDate = "";
                        }

                        // 添加新的
                        this.allFieldMap.set(getParamKey(firstSection[i]),firstSection[i].userSelection.parameterValue);
                    }

                }else{ // 多个seciton删除其中一个时

                    // 获取当前section所有二级表groupId，用于删除二级表；
                    // 有二级表的组不可能存在多个section,因为程序逻辑不支持，因此此处不予处理
                    // ......


                    sectionList[sectionIndex].forEach(function(param){
                        // 删除旧的
                        let oldKey = getParamKey(param);
                        that.allFieldMap.delete(oldKey);
                        that.unsavedParamIdList.remove(oldKey);
                    });
                    sectionList.splice(sectionIndex,1);
                }
                groupIdList.push(groupId);

                that.save(groupIdList.join(","),function(){
                    that.$message({message: '删除成功！',type: 'success'});
                });
                
            }).catch(() => {
                      
            });
        },
        // 功能 - 信息预览
        infoPreview(){
            this.$refs.infoPreview.$el.style.display = "flex";
            this.previewData = JSON.parse(JSON.stringify(this.allFieldList));
        },
        // 获取select的option选项列表 - 获取职称分类option选项列表
        findQaCategories(){
            infoEntryQaCategoriesPost().then(res => {
                if(res.code == 200){
                    this.qaCategoriesData = res.data;

                    var paramList = this.allFieldList[0].groupList[0].section[0];
                    for(var i=0;i<paramList.length;i++){

                        // 职称评审 - 现职称所属领域
                        if("10100-027" == paramList[i].id){ 
                            paramList[i].options = res.data;

                            // 职称评审 - 现职称所属类型
                            for(var pindex = 0;pindex < paramList[i].options.length;pindex++){
                                if(paramList[i].options[pindex].name == paramList[i].userSelection.parameterValue){
                                    paramList[i+1].options = paramList[i].options[pindex].childList;

                                    // 职称评审 - 现职称
                                    for(var ppindex = 0;ppindex < paramList[i+1].options.length;ppindex++){
                                        if(paramList[i+1].options[ppindex].name == paramList[i+1].userSelection.parameterValue){
                                            paramList[i+2].options = paramList[i+1].options[ppindex].childList;
                                            break;
                                        }
                                    }
                                    break;
                                }
                            }
                            break;
                         }
                    }


                }
            });
        },
        // 获取select的option选项列表 - 通过职称获取岗位名称
        findCategoryTypePost(categoryTitle,isClear){

            if(categoryTitle.trim() == ""){
                return;
            }
            
            var formData = new FormData;
            formData.append("categoryTitle",categoryTitle);
            infoEntryCategoryTypePost(formData).then(res => {
                if(res.code == 200){
                    var paramList = this.allFieldList[0].groupList[0].section[0];
                    for(var i=0;i<paramList.length;i++){
                        if("10100-028" == paramList[i].id){ 
                            if(isClear == true){
                                paramList[i].userSelection.parameterValue = "";
                            }
                            paramList[i].options = res.data;
                            
                        }
                    }
                }
            });
        },
    },
    updated: function () {
        // 监听渲染完成
        this.$nextTick(function () {
            this.$refs.bottomOperation.style.display = "flex";
            this.$refs.loading.style.display = "none";
        })
    }
}
</script>

<style scoped>

.container{
    position: relative;
    display: flex;
    flex-direction:row;
    align-items: center;
    width: 100%;
    
    background: #0000 !important;
    box-shadow: none;
    border-radius: 0px;
    font-size: 14px;
}
.container>.content{
    display: flex;
    flex-direction: column;
    width: calc(100% - 186px);
    /* z-index: 100; */
    margin-bottom: 56px;
}
.container>.content .module{
    background: white;
    box-shadow: 3px 1px 12px 1px #eaeaea;
    border-radius: 5px;
    margin-bottom: 27px;
    overflow: hidden;
    padding: 24px 33px;
}
.container>.bottomOperation{
    /* display: flex; */
    display:none;
    justify-content: center;

    background: white;
    padding: 21px 0px;
    position: fixed;
    bottom: 0px;
    left: 202px;
    z-index: 1;
    width: calc(100% - 416px);

    box-shadow: -2px -2px 15px 0px rgba(0, 0, 0, 0.2);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.container>.bottomOperation>button{
    margin: 0px 36px;
    font-size: 15px;
    padding: 7px 38px;
}


.loading{
    position: absolute;
    top: 100px;
    left: calc(50% - 100px);
    /* z-index: 1000; */
    display: flex;
    width: 200px;
    height: 200px;
}
.loading>img{
    width: 100%;
    height: 100%;
}
.loading>img:nth-child(1){
    display: inline-block;
    animation: jw-spin-name 2s infinite linear;
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
}
.loading>img:nth-child(2){
    position: absolute;
    left: 0px;
}
@keyframes jw-spin-name{
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

/* 右侧导航栏 */
.rightSideTab{
    position: fixed;
    top: 86px;
    bottom:0px;
    right: 24px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    width: 173px;
}
.rightSideTab::-webkit-scrollbar {
    width: 9px;  /* 横向滚动条宽度 */
    height: 9px; /* 竖向滚动条宽度 */
    background: rgba(0,0,0,.0);
    border:none;
}
/* 滚动条 - 滚动块样式 */
.rightSideTab::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.0);
    border:none;
    border-radius:4px
}
.rightSideTab>.content{
    display: flex;
    flex-shrink:0;
    flex-direction: column;
    background: white;
    box-shadow: 3px 1px 12px 1px #eaeaea;
    border-radius: 5px;
    padding: 9px 0px;
    padding-top: 0px;
    margin-bottom: 15px;
}
.rightSideTab>.content>.moduleName{
    background: #31478F;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: bold;
    padding: 11px 22px;
    color: white;
    cursor: pointer;

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.rightSideTab>.content>.item{
    display: flex;
    cursor: pointer;
    flex-shrink: 0;
}
.rightSideTab>.content>.item>.text{
    padding: 9px 22px;
    /* text-align: center; */
    color: #999999;
    background:white;
    flex-grow: 1;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  /* 使用省略号来代表被修剪的文本 */
    width: 100%;
    box-sizing: border-box;
}
.rightSideTab>.content>.item.active>.text{
    color: #31478F;
    background:#F5F8FD;
    font-weight:bold;
}
.rightSideTab>.content>.item.active>.line{
    width: 3px;
    min-width: 3px;
    background: #31478F;
}



/* 小标题 */
.minTile{
    display:flex;
    align-items: center;
    justify-content: space-between;
    background: #f5f8fe;
    color: #31478F;
    font-weight: bold;
    height: 48px;
    padding-right: 17px;
}
.minTile > .title-text {
    display: flex;
    align-items: center;
    padding: 13px 18px;
    font-weight: bold;
    flex-grow: 1;
}
.minTile .line {
    display: block;
    width: 3px;
    height: 12px;
    background: #31478F;
    margin-right: 9px;
}

.minTile_1{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.minTile_1>.title-text{
    color: #31478F;
    font-size: 31px;
    font-weight: bold;
}
.minTile_1>button{
    position: absolute;
    right: 17px;
}

/* 组标题 */
.groupTitle{
    display: flex;
    color: #31478F;
    padding: 24px 0px;
    padding-right: 17px;
}
.groupTitle>.title-text{
    flex-grow: 1;
    margin-left: 22px;
    font-weight: bold;
}

/* 组底部 */
.group{
    border-radius:8px;
}
.group>.bottomOperation{
    display: flex;
    align-content: center;
    justify-content: center;
    padding-bottom: 28px;
    margin-bottom: 26px;
    border-bottom: #ececec solid 1px;
}
.group>.bottomOperation>button{
    font-size: 14px;
    padding: 7px 28px;
    box-shadow: 3px 1px 12px 1px #dcdcdc;
    margin: 0px 45px;
}

/* 表单 */
.formContainer{
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    margin-bottom: 24px;

    padding-bottom: 10px;
    border-bottom: solid #efefef 1px;
    position: relative;
}
.formContainer .deleteButton{
    position:absolute;
    right: -18px;
    top: 6px;

}
>>> .formItem.unsaved input,
>>> .formItem.unsaved textarea,
>>> .formItem.unsaved select{
    border: red solid 1px;
}
>>> .formItem{
    width: 33%;
    display: flex;
    flex-direction: row;
    align-items: center;
    color:#333333;
    font-size:14px;
    margin:6px 0px;
}
.formContainer>.formItem>.name{
    text-align: right;
    padding-right: 4px;
    width: 36%;
}
.formContainer>.formItem>.name>i{
    color: rgb(18, 150, 219);
}
.formContainer>.formItem>.value{
    width: 60%;
    display:flex;
}
.formContainer>.formItem>.value>.value{
    flex-grow: 1;
    position: relative;
}
>>> .value.file{
    flex-grow: 1;
    position: relative;
}
>>> .value.file>input[type='text']{
    pointer-events: none;
}
>>> .value.file>.fileContent{
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    height: 100%;
    width: 100%;
    padding: 0px 6px;
}
>>> .value.file>.fileContent>label{
    display: flex;
    align-items: center;
}
>>> .value.file>.fileContent input[type='file']{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    opacity: 0;
    cursor: pointer;
    z-index: -1;
}
>>> .value.file>.fileContent>.name{
    flex-grow: 1;
    cursor: pointer;
    color: gray;
    position: relative;
    overflow: hidden;
}
>>> .value.file>.fileContent>.name>div{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
>>> .value.file>.fileContent>.close{
    display: flex;
    cursor: pointer;
    display: none;
    color: red;
    font-size: 16px;
    margin-top: 6px;
}
>>> .value.file>.fileContent.has>.name{
    color: #333;
}
>>> .value.file>.fileContent.has>.close{
    display: block;
}
.formContainer>.formItem>.value>.operation{
    white-space: nowrap;
    display: flex;
    align-items: center;
    margin-left: 4px;
}
.formContainer>.formItem>.value>.operation i{
    font-size: 18px;
    cursor: pointer;
    color: #6f8bef;
}
.formContainer>.formItem>.value>.operation i:hover{
    color: #31478F;
}
.formContainer>.formItem>.value>.operation.disabled i{
    color: #b1b1b1;
    cursor: default;
    pointer-events: none;
}


.formContainer>.formItem>.value>.value.daterange{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}
.formContainer>.formItem>.value>.value.daterange>.line{
    width: 10px;
    height: 1px;
    background: #d2d2d2;
}

/* 50%宽度 */
.formContainer>.formItem_0_5{
    width:50%;
}
.formContainer>.formItem_0_5>.name{
    width:60%;
}
.formContainer>.formItem_0_5>.value{
    width:30%;
}

.fileUploadLoading{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.12941176470588237);
    z-index: 10000;
    /* display: flex; */
    display: none;
    align-items: center;
    justify-content: center;
}
.fileUploadLoading>.content{
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 30px 40px;
    border-radius: 6px;
    font-size: 16px;
}
.fileUploadLoading>.content>i{
    font-size: 20px;
    margin-right: 8px;
}


/* 保存 */
.save{
    display: flex;
    justify-content: center;
    margin: 60px;
}
.save button{
    font-size: 15px;
    padding: 9px 45px;
    box-shadow: 3px 1px 12px 1px #c5c5c5;
    margin: 0 30px;
}


.dialogVisible_1,.dialogVisible_1 >>> table{
    font-size: 14px;
}
.dialogVisible_1,.dialogVisible_1 >>> table td>.cell>*{
    width: 100%;
}
.dialogVisible_1 .value.file>.fileContent>.close{
    /* margin-right: 16px; */
}
.dialogVisible_1_form{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.dialogVisible_1_form .functionButton{
    display: flex;
}
.dialogVisible_1_form .functionButton>*{
    margin-left: 10px;
}
.dialogVisible_1_form>.formItem{
    display: flex;
    align-items: center;
}
.dialogVisible_1_form>.formItem .value{
    width: auto;
}
.dialogVisible_1_footer{
    display: flex;
    justify-content:center;
    margin-top: 10px;
}

.dialogVisible_2_content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.dialogVisible_2_content>div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px 0px;
}
.dialogVisible_2_content>div>button{
    margin-bottom: 8px;
}

</style>

